<template>
  <div class="main">
    <!--面包屑-->
    <div class="top">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>项目群</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>区域列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div>
      <el-card class="card">
        <!--标题文字-->
        <div class="headerTitle">
          <div>区域列表</div>
        </div>

        <div class="search">
          <el-input
            v-model="input"
            placeholder="请输入区域名称搜索"
            :suffix-icon="Search"
            style="width: 300px"
            @keyup.enter="getRegionList"
          />
          <el-button class="addbtn" @click="handleAdd">新建区域</el-button>
        </div>

        <div class="table" style="padding: 0 20px">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{
              background: '#b4c7e7',
              color: 'black',
              fontSize: '12px',
              fontWeight: '500',
            }"
          >
            <el-table-column
              prop="region_name"
              label="区域名称"
              align="center"
              width="370px"
            />

            <el-table-column
              prop="distance"
              label="离地距离"
              align="center"
              width="370px"
            />

            <el-table-column
              prop="img"
              label="区域图片"
              align="center"
              width="500px"
            >
              <template v-slot="scope">
                <img
                style="height: 35px;width:40px"
                  class="imgi"
                  :src="'http://oao.zhichengshangxin.com/' + scope.row.img"
                  alt=""
                />
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <span class="edit" @click="handleEdit(scope.row)">编辑</span>
                <span class="dell" @click="handleDell(scope.row.id)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 新增 -->
        <div>
          <el-dialog v-model="addVisible" title="新建区域" width="30%">
            <el-divider class="line" />
            <el-form>
              <el-form-item label="区域名称" class="lineheight">
                <el-input v-model="form.region_name" placeholder="区域名称" />
              </el-form-item>
              <el-form-item label="离地距离" class="lineheight">
                <el-input v-model="form.distance" placeholder="离地距离" />
              </el-form-item>
              <el-form-item label="区域图片" class="lineheight">
                <el-upload
                v-model:file-list="fileList"
                  class="upload-demo"
                  action="http://oao.zhichengshangxin.com/UploadsFile"
                  :on-success="backImg"
                  ref="imgi"
                  :limit="2"	
						:on-remove="handleRemove"
						:on-change="cg"
						:show-file-list="true"
                >
                  <div class="upload">
                    <el-button icon="Upload">上传图片</el-button>
                  </div>
                </el-upload>
              </el-form-item>
              <el-divider class="ment" />
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addVisible = false" class="cancle"
                  >取消</el-button
                >
                <el-button type="primary" class="save" @click="addBtns"
                  >保存</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>

        <!-- 修改 -->
        <div>
          <el-dialog v-model="editVisible" title="编辑区域" width="30%">
            <el-divider class="line" />

            <el-form>
              <el-form-item label="区域名称" class="lineheight">
                <el-input v-model="upform.region_name" placeholder="区域名称" />
              </el-form-item>
              <el-form-item label="离地距离" class="lineheight">
                <el-input v-model="upform.distance" placeholder="离地距离" />
              </el-form-item>
              <el-form-item label="区域图片" class="lineheight">
                <el-upload
                v-model:file-list="fileList"
                  class="upload-demo"
                  action="http://oao.zhichengshangxin.com/UploadsFile"
                  :on-success="editImg"
                  ref="imgi"
                  :limit="2"	
						:on-remove="handleRemove"
						:on-change="cg"
						:show-file-list="true"
                >
                  <div class="upload">
                    <el-button icon="Upload">上传图片</el-button>
                  </div>
                </el-upload>
              </el-form-item>
              <el-divider class="ment" />
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="editVisible = false" class="cancle"
                  >取消</el-button
                >
                <el-button type="primary" @click="editBtn" class="save"
                  >保存</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>

        <div class="page">
          <el-pagination
            v-model:currentPage="currentPage"
            layout="prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { RegionDelete, RegionList,RegionAdd,RegionEdit } from '../../../api/model/areaList';
import { ElMessage } from "element-plus";
// import { RegionList } from "../../../api/model/areaList";

let imgi = ref("");
const input = ref("");
const fileList = ref([])
const currentPage = ref(1);
const total = ref(0)

const addVisible = ref(false);

const editVisible = ref(false);

const tableData = ref([]);
watch(()=>currentPage.value,()=>{
  getRegionList()
})
const editBtn = async () => {
  editVisible.value = false;
  console.log(upform);
  await RegionEdit(upform);
  await getRegionList();
};
// 添加form
const form = reactive({
  region_name: "",
  distance: "",
  img: "",
});

// 修改form
const upform = reactive({
  region_name: "",
  distance: "",
  img: "",
  id: "",
});

const backImg = (e) => {
  form.img = e.data;
  ElMessage.success('图片上传成功')
  fileList.value.push({
		name: e.data.split("/").at(-1),
		url: "http://oao.zhichengshangxin.com/" + e.data,
	});
};
const handleRemove = ()=>{
	fileList.value = []
}
const cg = (f,files)=>{
	if(files){
    fileList.value=files.slice(-1)
  }
}
const editImg = (e) => {
  upform.img = e.data;
};
// 新增按钮
const addBtns = async () => {
  addVisible.value = false;
  await RegionAdd(form);
  form.region_name = "";
  form.distance = "";
  form.img = "";
  getRegionList();
  this.$ref["imgi"].clearFiles();
};

// 获取区域列表
const getRegionList = async () => {
  let res = await RegionList({keyword: input.value,page:currentPage.value});
  tableData.value = res.data.data
  total.value = res.data.total
  console.log(1232111111111111);
};
onMounted(() => {
  getRegionList();
});
// 添加
const handleAdd = () => {
  addVisible.value = true;
};
// 删除
const handleDell = async (e) => {
  console.log(e);
  await RegionDelete({ id: e });
  await getRegionList();
};

const handleEdit = (e) => {
  editVisible.value = true;
  upform.region_name = e.region_name;
  upform.distance = e.distance;
  upform.img = e.img;
  upform.id = e.id;
};

</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #eaf2fa;
  overflow: hidden;
}
.imgi {
  width: 10%;
}
.top {
  margin-left: 30px;
  margin-top: 5px;
}

.card {
  width: 100%;
  // height: 550px;
  margin-top: 15px;
}
.card :deep(.el-card__body) {
  padding: 0 !important;
}

:deep(.el-form-item__label) {
  white-space: pre-line;
}

.edit {
  margin-right: 30px;
  font-size: 13px;
  color: #606fa6;
  cursor: pointer;
}

.dell {
  font-size: 13px;
  color: #fccb56;
  cursor: pointer;
}

.search {
  display: flex;
  padding: 0 20px;
  justify-content: flex-end;
  margin-top: 20px;
}

.addbtn {
  width: 100px;
  height: 30px;
  color: white;
  background-color: #8faadc;
  margin-left: 20px;
}

.table {
  margin-top: 15px;
}

.el-dialog__title {
  color: #636ea6;
  letter-spacing: 1px;
}

.line {
  position: absolute;
  top: 40px;
  left: 0px;
}

.el-form-item__label {
  white-space: pre-line;
}

.ment {
  position: absolute;
  top: 190px;
  left: 0px;
}

.lineheight {
  height: 20px;
}

.page {
  margin-left: 950px;
  margin-top: 10px;
}

:deep(.el-dialog__title) {
  color: #7b6ea5;
  letter-spacing: 1px;
}

.cancle {
  background-color: #cccccc;
  color: white;
  width: 100px;
}

.save {
  background-color: #8faadc;
  color: white;
  width: 100px;
}
</style>
